<template>
	<view>
		<!-- 标题栏 -->
		<div class="tool-bar-fixed" ref="mapTop" :style="{top:'0px'}">
			<div class="search_view">
				<image class="search_icon" src="http://images.linglinggong.net/icon1/44.png"></image>
				<input class="search_input" placeholder-class="search_inputp" placeholder="搜索您需要的工作地点(可拖动地图)"
					@focus="showHistoryView=true" @input="searchAddress" :focus="true" />
			</div>
		</div>
		<!-- 历史列表 -->
		<div v-if="showHistoryView" class="search_list_view" :style="{top:demo.height+demo.top+topHeight+'px'}">
			<div class="HistoryViewTitle">
				<text>历史搜索</text>
				<image class="HistoryViewImge" src="http://images.linglinggong.net/wgc_icon/18.png" @click="delHistory">
				</image>
			</div>
			<!-- <div style=""> -->
			<div class="HistoryList">
				<div class="HistoryList-Item" v-for="(item,index) in historyAdd" :key="index">
					<text class="HistoryList-Item-text" @click="chooseIs(index,item)">{{item.name}}</text>
				</div>
			</div>
		</div>
		<!-- 搜索出来的地址 -->
		<view>
			<view show-scrollbar="true" v-if="showListView" class="search_list_view"
				:style="{top:demo.height+demo.top+topHeight+'px'}">
				<view v-for="(item,index) in addressList" :key="item.id" class="addres_item"
					@click="chooseIs(index,item)">
					<text class="text_name">{{item.name}}</text><br />
					<text class="text_address">{{item.district+item.address}}</text>
					<image class="choose_icon" v-if="addressIndex===index"
						src="http://images.linglinggong.net/icon1/01.png"></image>
				</view>
			</view>
		</view>
		<!-- 搜索出来的地址 -->
	</view>
</template>
<script>
	import {
		inputtips
	} from '@/api/api.js' //输入提示功能
	import unit from '@/libs/newUnit.js'
	export default {
		data() {
			return {
				showHistoryView: true,
				showListView: false,
				historyAdd: [], //历史地址数组
				addressList: [],
				location: {
					"latitude": 0,
					"longitude": 0
				}, //地图中心经纬度
				addressIndex: '',
			};
		},
		onLoad(e) {
			if (uni.getStorageSync("historyAdd")) {
				this.historyAdd = uni.getStorageSync("historyAdd")
			}
			unit.get_task_Latitude().then(v => {
				if (!v.code) {
					this.location.latitude = v.split(',')[0]
					this.location.longitude = v.split(',')[1]
				}
			})
		},
		methods: {
			//删除历史记录
			delHistory() {
				uni.setStorageSync("historyAdd", [])
				this.historyAdd = []
			},
			//按照idnex删除
			delHistoryOfindex(index) {
				this.historyAdd.splice(index, 1)
				uni.setStorageSync("historyAdd", this.historyAdd)
			},
			// 输入提示功能
			searchAddress(e) {
				this.showHistoryView = false
				let city = uni.getStorageSync('region').slice(0, 6)
				inputtips({
					location: this.location.longitude + ',' + this.location.latitude,
					keywords: e.detail.value,
					city: city,
					citylimit: true
				}).then(res => {
					console.log(res)
					this.addressList = res[1].data.tips
					this.showListView = true
				})
			},
			chooseIs(index, bodyInfoList) {
				uni.hideKeyboard()
				uni.showLoading({
					title: '请稍候···'
				})
				console.log(bodyInfoList)
				if (!this.historyAdd.includes(bodyInfoList)) {
					this.historyAdd.push(bodyInfoList)
					uni.setStorageSync("historyAdd", this.historyAdd)
				}
				if (bodyInfoList.location == '' || bodyInfoList.location == null) {
					uni.hideLoading()
					return uni.showToast({
						title: "请选择其他地址~",
						icon: "none"
					})
				}
				this.addressIndex = index
				// 选择完成之后移动地图到指定位置
				this.location = {
					longitude: bodyInfoList.location.split(',')[0],
					latitude: bodyInfoList.location.split(',')[1]
				}
				let pages = getCurrentPages(); //获取页面栈
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.setLocation(this.location); //前一个页面方法
				prevPage.$vm.getAddressText(this.location);
				uni.navigateBack()
				uni.hideLoading()
			},
		}
	}
</script>
<style lang="less">
	/* 标题 */
	.tool-bar-fixed {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		right: 0;
		padding: 20upx 40upx;
		z-index: 1;
	}

	.search_icon {
		width: 28upx;
		height: 28upx;
		margin: 26upx;
	}

	.search_view {
		flex-direction: row;
		display: flex;
		background-color: #F2F2F2;
		border-radius: 36upx;
	}

	.search_input {
		height: 80upx;
		line-height: 80upx;
		flex: 1;
		font-size: 32upx;
		background: transparent;
	}

	.search_inputp {
		height: 80upx;
		line-height: 80upx;
		flex: 1;
		font-size: 14wx;
	}

	/* 搜索列表 */
	.search_list_view {
		position: fixed;
		top: 120upx;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		padding-top: 35upx;
		background-color: #FFF;
		box-sizing: border-box;
		padding: 10rpx;
	}

	.addres_item {
		padding: 10upx 40upx;
		border-bottom: 1rpx solid #FCC928;
	}

	.text_name {
		font-size: 36upx;
		line-height: 50upx;
	}

	.text_address {
		font-size: 30upx;
		line-height: 40upx;
	}

	.choose_icon {
		position: absolute;
		top: 30upx;
		right: 30upx;
		width: 50upx;
		height: 50upx;
	}

	.HistoryViewTitle {
		font-size: 28upx;
		width: 690upx;
		height: 40upx;
		margin-top: 0upx;
		margin-left: 30upx;
	}

	.HistoryViewButton {
		width: 534upx;
		height: 78upx;
		background: #FCC928;
		border-radius: 8upx;
		font-size: 32upx;
		font-weight: bold;
		color: #402110;
		margin-left: 108upx;
		justify-content: center;
		align-items: center;
		margin-top: 40upx;
	}

	.HistoryViewImge {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 0;
	}

	.HistoryList {
		width: 690upx;
		margin-left: 30upx;
		margin-top: 24upx;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.HistoryList-Item {
		/* width: 690upx; */
		background-color: #F2F2F2;
		margin-top: 24upx;
		margin-left: 20upx;
		border-radius: 8rpx;
		padding: 10rpx 10rpx;
		display: inline-block;
	}

	.HistoryList-Item-lin {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 0;
	}

	.HistoryList-Item-del {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0;
	}

	.HistoryList-Item-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		padding: 20rpx;
	}
</style>